<template>
  <div>
    <!-- 左对齐 -->
    <MusicBack title="首发音乐" :arrow="true" />
    <MusicLaoding v-if="laoding" />
    <van-row type="flex" class="box">
      <van-col
        span="6"
        v-for="(item, index) in musics"
        :key="index.id"
        @click="playMusic(index)"
      >
        <span>
          <van-image
            radius="5"
            width="80"
            height="80"
            lazy-load
            :src="item.picUrl + '?param=200y200'"
          />
          <van-icon name="play-circle-o" size="25" />
        </span>
        <span class="van-ellipsis">{{ item.name }}</span>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { GetnewsongAPI } from "@/api/api.js";
import MusicBack from "@/components/common/back.vue";
import MusicLaoding from "@/components/common/laoding.vue";
export default {
  name: "MusicMusicListMore",
  components: {
    MusicBack,
    MusicLaoding,
  },
  data() {
    return { music: [], laoding: true };
  },

  mounted() {
    GetnewsongAPI({ limit: 200 }).then((res) => {
      if (res.status == 200) {
        this.music = res.data.result;
        this.laoding = false;
      }
    });
  },
  computed: {
    musics() {
      const musics = this.music.map((item) => ({
        id: item.id,
        name: item.name,
        picUrl: item.picUrl,
        ar: item.song.artists.map((arItem) => arItem.name).join("/"),
        arId: item.song.artists[0].id,
        arList:item.song.artists.map((items) => ({
          arname: items.name,
          arid: items.id,
        })),
        al: item.song.album.name,
        alId: item.song.album.id,
      }));
      return musics;
    },
  },
  methods: {
    playMusic(index) {
      this.$store.commit({
        type: "SET_PLAY_MUSIC",
        index: index,
        list: this.musics,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  .van-col {
    display: flex;
    flex-direction: column;
    padding: 0.3125rem;
    span:nth-child(1) {
      position: relative;
      .van-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
      }
    }
    span:nth-child(2) {
      width: 100%;
      text-align: center;
    }
  }
}
</style>